<script setup lang="ts">
import useDialog from '@/hooks/useDialog';
import { usePagination } from '@/hooks/usePagination';
import { page } from '@/api/siteInfo';
import { IQuery } from '@/api/siteInfo/types';

const props = defineProps(['info']);
const { visible, openDialog, closeDialog } = useDialog({});
const { tableData, loading, total, queryParams } = usePagination();
// 扩展queryParams
queryParams.value = {
  ...queryParams.value,
  id: props.info.id,
  type: 'SITE'
} as IQuery;
const getList = async () => {
  // 你的获取数据逻辑
  loading.value = true;
  const { data } = await page(queryParams.value);
  tableData.value = data.records;
  total.value = data.totalCount;
  loading.value = false;
};
onMounted(() => {
  getList();
});
defineExpose({
  open: openDialog,
  close: closeDialog
});
</script>

<template>
  <el-dialog v-model="visible" :modal="false" :draggable="true" width="50%" append-to-body class="largeScreen-dialog" :before-close="closeDialog">
    <div class="pipe-table">
      <el-table
        :data="tableData"
        v-loading="loading"
        element-loading-background="rgba(0,0,0,0.2)"
        :row-style="{ height: '50px' }"
        :cell-style="{ padding: '0px' }"
        empty-text="暂无数据"
      >
        <el-table-column prop="name" label="名称" min-width="160" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="type" label="类型" min-width="120" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="in_pres" label="进站压力MPA" min-width="130" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="out_pres" label="出站压力MPA" min-width="130" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="in_temp" label="进站温度(℃)" v-if="info.type != '2'" min-width="120" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="out_temp" label="出站温度(℃)" v-if="info.type != '2'" min-width="120" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="read_time" label="收集时间" min-width="140" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="real_flow" v-if="info.type == '5'" label="瞬时流量" min-width="120" show-overflow-tooltip align="center">
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    </div>
  </el-dialog>
</template>

<style scoped lang="scss">
.pipe-table {
  :deep(.el-table) {
    --el-table-border-color: #004e70;
    --el-table-header-bg-color: transparent;
    --el-table-row-hover-bg-color: transparent;
    --el-table-text-color: #fff;
    --el-table-header-text-color: #00ffff;
    --el-table-border: none;

    background-color: transparent;

    .el-table__header-wrapper th {
      background: linear-gradient(180deg, #004db9 0%, #01347b 48%, #014cb5 100%);
      color: #0ff;
    }

    .el-table__body {
      tr {
        background-color: #083577;
        color: #fff;

        td {
          border-bottom: 1px solid #0a73a0;
          cursor: pointer;
        }
      }
    }

    .el-table__empty-block {
      background-color: #003556;

      .el-table__empty-text {
        color: #00ffff;
        font-size: 24px;
      }
    }

    .el-table__body-wrapper {
      &::-webkit-scrollbar {
        width: 0.5rem;
        height: 0.5rem;
        background-color: #3f8af3;
        border-radius: 0.375rem;
      }

      &::-webkit-scrollbar-thumb {
        background-color: #1c4682;
        border-radius: 0.375rem;
      }
    }
  }

  .pagination-container {
    background: #083577;
    padding: 10px 16px;
    text-align: right;
    margin: 0;

    &.hidden {
      display: none;
    }
  }

  :deep(.el-pagination__total),
  :deep(.el-pagination__jump) {
    color: #fff;
  }
}
</style>
